<template>
	<view class="custom-tabbar" :style="tabbarStyle">

		<view v-for="(item, index) in tabList" :key="index" class="tab-item"
			:class="{ 'tab-center': index === centerIndex, 'active': currentIndex === index }"
			@click="handleTabClick(index, item.pagePath)" :style="'z-index:999999'">

			<!-- 中间突起 Tab（单独旋转动画） -->
			<view v-if="index === centerIndex" class="center-icon">
				<image :src="currentIndex === index ? item.selectedIconPath : item.iconPath" class="icon"
					mode="widthFix" :alt="item.text"></image>
			</view>


			<!-- 普通 Tab（缩放动画） -->
			<view v-else :class="{ 'icon_active': currentIndex === index }"
				style="display: flex;flex-direction: column;align-items: center;justify-content: space-around;">
				<image class="icon" :src="currentIndex === index ? item.selectedIconPath : item.iconPath"
					mode="widthFix" :alt="item.text"></image>
				<text class="text" :class="{ 'text-active': currentIndex === index }">{{ item.text }}</text>
			</view>

		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onShow,
		onReady
	} from '@dcloudio/uni-app';

	const currentIndex = ref(0);
	// 中间突起 Tab 的索引（默认第3个，外部可调整）
	const centerIndex = ref(1);
	// 存储安全区底部内边距值
	const safeAreaBottomPadding = ref(0);
	// 计算属性 - 动态生成tabbar样式
	const tabbarStyle = computed(() => {
		return {
			paddingBottom: `${safeAreaBottomPadding.value}px`
		};
	})

	const tabList = ref([{
			text: "博客",
			iconPath: "/static/blog.png",
			selectedIconPath: "/static/blog_selected.png",
			pagePath: "pages/blog/list"
		},
		{
			text: "发布",
			iconPath: "/static/publish.png",
			selectedIconPath: "/static/publish.png",
			pagePath: "pages/blog/edit"
		},
		{
			text: "我的",
			iconPath: "/static/my.png",
			selectedIconPath: "/static/my_select.png",
			pagePath: "pages/personal-center/personal-center"
		}
	]);

	/**
	 * 同步当前页面对应的 Tab 选中状态
	 */
	const syncCurrentTab = () => {
		const pages = getCurrentPages();
		if (!pages.length) return;
		// 获取当前页面路径（去掉开头的 "/"）
		const currentPagePath = pages[pages.length - 1].route;
		// 匹配对应的 Tab 索引
		const matchIndex = tabList.value.findIndex(
			item => item.pagePath === currentPagePath
		);
		// 更新选中状态（防止重复赋值触发不必要的更新）
		if (matchIndex !== -1 && matchIndex !== currentIndex.value) {
			currentIndex.value = matchIndex;
		}
	}

	/**
	 * Tab 点击事件
	 * @param {Number} index - Tab 索引
	 * @param {String} pagePath - 目标页面路径
	 */
	const handleTabClick = (index, pagePath) => {
		// 1. 防止重复点击同一 Tab
		if (currentIndex.value === index) return;
		// 3. 跳转对应 Tab 页面（UniApp switchTab 要求路径以 "/" 开头）
		uni.redirectTo({
			url: `/${pagePath}`,
			// 跳转失败处理
			fail: (err) => {
				console.error("Tab 跳转失败：", err);
				uni.showToast({
					title: "页面跳转失败",
					icon: "none",
					duration: 1500
				});
			}
		});
		// 4. 向父组件发送点击事件（可选，外部可监听）
		uni.$emit('tabbar-click', {
			index,
			pagePath,
			item: tabList.value[index]
		});
	}

	// 在页面准备好时获取安全区信息并设置内边距
	onReady(() => {
		const systemInfo = uni.getSystemInfoSync();
		safeAreaBottomPadding.value = systemInfo.safeAreaInsets.bottom;
	});

	// 定义 onShow 生命周期函数
	onShow(() => {
		syncCurrentTab();
	});
</script>

<style lang="scss" scoped>
	/* 基础 TabBar 容器样式 */
	.custom-tabbar {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		// height: 100rpx;
		background-color: #fff;
		border-top: 1px solid #eee;
		/* 	z-index: 9999999; */
		/* 防止低端机适配问题 */
		box-sizing: border-box;
		/* 动态绑定安全区底部内边距 */
	}

	.tab-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 100%;
		/* 点击区域扩大 */
		padding: 5px 0;
		box-sizing: border-box;
	}

	/* 中间突起 Tab 容器样式 */
	.tab-center {
		position: relative;
		height: 100%;
		display: flex;
		align-items: flex-start;
		/* 避免突起部分遮挡其他 Tab */
		z-index: 1000;
	}

	/* Tab 图标基础样式 */
	.icon {
		width: 24px;
		height: 24px;
		object-fit: contain;
		/* 防止图标变形 */
	}

	/* Tab 文字样式 */
	.text {
		font-size: 10px;
		color: #666;

		/* 文字与图标间距 */
	}

	/* 选中文字样式 */
	.text-active {
		color: #06cf8b;
		// font-weight: 700;
		/* 选中文字加粗，增强视觉反馈 */
	}

	/* 中间突起图标容器 */
	.center-icon {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: -25px;
		/* 向上突起高度 */
		box-sizing: border-box;
		/* 轻微边框增强立体感 */
	}

	/* 中间突起 Tab 的图标大小 */
	.center-icon .icon {
		border-radius: 50%;
		width: 60px;
		height: 60px;
	}
</style>